<template>
<div class="app-container">


    <!--条件查询-->
    <div>
       <el-form ref="form" :inline="true" :model="businessWhere" label-width="80px" class="demo-form-inline">

              <el-form-item label="商家分类名称" size="mini">
                <el-input v-model="businessWhere.classIficationName"></el-input>
              </el-form-item>
              <el-form-item label="创建时间" size="mini">
              <el-date-picker
                    v-model="businessWhere.createTime"
                         value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期时间">
                  </el-date-picker>
              </el-form-item>
              <el-form-item>

              <el-button type="primary" icon="el-icon-search" size="mini"  @click="selectWhere">查询</el-button>


                <el-button type="warning" size="mini">取消</el-button>
              </el-form-item>
            </el-form>
  <!-- 添加按钮 -->
           <div>
              <el-button type="success" @click="add" size="small"> 添加</el-button>
           </div>
     <!-- 列表渲染 -->
      <div>
             <el-table :data="tableData" style="width: 100%">
               <el-table-column type='index' label="序号"  width="80">
               </el-table-column>
                  <el-table-column  prop="classIficationName" label="商家分类名称">
                  </el-table-column>
                  <el-table-column prop="createTime" label="创建时间">
                  </el-table-column>
                  <el-table-column  prop="desc" label="备注">
                  </el-table-column>
                   <el-table-column  label="操作">
                     <template slot-scope='scope'>
                        <el-button type="primary" icon="el-icon-edit" @click="update(scope.row)" size="small">修改</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="small" @click="del(scope.row.id)">删除</el-button>
                     </template>

                   </el-table-column>
                </el-table>
          </div>
 <!-- 分页插件 -->
          <el-pagination
                     :current-page="pageIndex"
                     :page-size="pageSize"
                     :total="total"
                     style="padding: 30px 0; text-align: center;"
                     layout="total, prev, pager, next, jumper"
                     @current-change="listPage"
                   />
     <!-- 添加窗体 -->
     <!-- 修改窗体 -->
            <el-dialog
                   title="添加/修改用户窗体" :visible.sync="businessVisible" width="65%">
                     <el-form ref="form" :model="addBusinessclassify" label-width="80px">
                       <el-form-item label="序号">
                         <el-input v-model="addBusinessclassify.id"></el-input>
                       </el-form-item>
                       <el-form-item label="商家分类名称">
                         <el-input v-model="addBusinessclassify.classIficationName"></el-input>
                       </el-form-item>
                         <el-form-item label="创建时间">
                           <el-date-picker
                                 v-model="addBusinessclassify.createTime"
                                 type="datetime"
                                      value-format="yyyy-MM-dd HH:mm:ss"
                                 placeholder="选择日期时间">
                               </el-date-picker>
                          </el-form-item>
                          <el-form-item label="备注">
                            <el-input type="desc" v-model="addBusinessclassify.desc"></el-input>
                          </el-form-item>
                       </el-form>
                       <span slot="footer" class="dialog-footer">
                           <el-button @click="businessVisible = false">取 消</el-button>
                           <el-button type="primary" @click="sendaddBusinessclassify">确 定</el-button>
                         </span>
                       </el-dialog>
    </div>

  </div>
</template>

<script>

  export default{
    name:'index',
    data(){
      return{
        businessVisible:false,
        pageIndex:1,
        pageSize:10,
        total:7,

        addBusinessclassify:{
          id:'',
          classIficationName:'',
          createTime:'',
          desc:''
        },
  businessWhere:{
    classIficationName:'',
    createTime:''
  },



  tableData:[
    {
      id:1,
      classIficationName:'川菜',
      createTime:'2023-10-23 14:58:23',
      desc:"备注信息"


    },{
      id:2,
      classIficationName:'豫菜',
      createTime:'2023-10-23 14:58:23',
      desc:"备注信息"

    },{
      id:3,
      classIficationName:'鲁菜',
      createTime:'2023-10-23 14:58:23',
      desc:"备注信息"
    }
  ]
      }
    },

    methods:{
       listPage(){},
   sendaddBusinessclassify(){
        this.tableData.push(this.addBusinessclassify)

        this.businessVisible = false
      },
  selectWhere(){
console.log("input"+this.businessWhere)
        this.tableData=this.tableData.filter(item=>item.classIficationName.includes(this.businessWhere.classIficationName))
        this.tableData=this.tableData.filter(item=>item.createTime.includes(this.businessWhere.createTime))
  },
  update(row){


   this.addBusinessclassify.id=row.id
        this.addBusinessclassify.classIficationName= row.classIficationName
        this.addBusinessclassify.createTime = row.createTime
        this.addBusinessclassify.desc = row.desc

      this.businessVisible=true
  },
  del(id){
 this.tableData=this.tableData.filter((item)=>item.id!==id)
  },

  add(){
    this.addBusinessclassify = {}
    this.businessVisible = true
  },



    }
  }
</script>

<style>
</style>
